<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="/css/pintuer.css">
    <link rel="stylesheet" href="/css/admin.css">
    <link rel="stylesheet" href="/layui2/css/layui.css">
    <script src="/js/jquery.js"></script>
    <script src="/js/pintuer.js"></script>
    <script src="/layui2/layui.js"></script>
</head>
<body>
<form class="layui-form" action="" lay-filter="form-info" style="margin: 2px 25px 0px 15px">
    <div class="layui-form-item" style="display: none">
        <div class="layui-input-block">
            <input type="text" name="parkingId" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">编号</label>
        <div class="layui-input-block">
            <input type="text" name="parkingCode" lay-verify="parkingCode" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" name="parkingUser" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-block">
            <input type="text" name="parkingPhone" lay-verify="parkingPhone" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">车牌</label>
        <div class="layui-input-block">
            <input type="text" name="carNum" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">费用</label>
        <div class="layui-input-block">
            <input type="text" name="parkingAmount" lay-verify="parkingAmount" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-block">
            <input type="radio" name="parkingType" value="0" title="临停车">
            <input type="radio" name="parkingType" value="1" title="月租车" checked>
            <input type="radio" name="parkingType" value="2" title="年租车">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">时间</label>
        <div class="layui-inline">
            <label class="layui-form-label">开始</label>
            <div class="layui-input-inline">
                <input type="text" name="parkingTime" class="layui-input" id="parkingTime" placeholder="yyyy-MM-dd">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">结束</label>
            <div class="layui-input-inline">
                <input type="text" name="parkingEnd" class="layui-input" id="parkingEnd" placeholder="yyyy-MM-dd">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script type="text/javascript">
    layui.use('form', function () {
        var form = layui.form;
        //监听提交
        form.on('submit(*)', function (data) {
            $.ajax({
                type: 'POST',
                url: "/parking/update",
                data: JSON.stringify(data.field),
                dataType: "json",
                contentType: "application/json",
                success: function (data) {
                    // console.log(data + "***")
                }, error: function (data) {
                    parent.layer.msg(JSON.stringify(data));
                }
            });
            let index = parent.layer.getFrameIndex(window.name);
            // parent.layui.table.reload('testReload');//重载父页表格，参数为表格ID
            parent.layer.close(index);
        });

        form.verify({
            parkingCode: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (value === 'undefined' || !value || !/[^\s]/.test(value)) {
                    return "车位编号不能为空";
                }
            }
            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            , pass: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格']
            , parkingPhone: function (value, item) {
                if (/[^\s]/.test(value)) {
                    if (!(/^[1][3,4,5,7,8,9][0-9]{9}$/.test(value))) {
                        return "请填写正确的手机号码";
                    }
                }
            }
            , parkingAmount: function (value, item) {
                if (value === 'undefined' || !value || !/[^\s]/.test(value)) {
                    return "请填写车位费";
                }
            }
        });

        //给表单赋值
        form.val("form-info", {
            "parkingCode": '${info.parkingCode}'
            , "parkingId": ${info.parkingId}
            , "parkingUser": '${info.parkingUser}'
            , "parkingPhone": '${info.parkingPhone}'
            , "parkingType": '${info.parkingType}'
            , "carNum": '${info.carNum}'
            , "parkingAmount": '${info.parkingAmount}'
            , "parkingTime": '${info.parkingTime?string("yyyy-MM-dd HH:mm:ss")}'
            , "parkingEnd": '${info.parkingEnd?string("yyyy-MM-dd HH:mm:ss")}'
        });

        //获取表单区域所有值
        // var data1 = form.val("formTest");
    });

    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //常规用法
        laydate.render({
            elem: '#parkingTime',
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm:ss'
        });

        laydate.render({
            elem: '#parkingEnd',
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm:ss'
        });
    });
</script>

</body>
</html>